<!-- 订单详情 -->
<template>
    <view class="orderDetail">
        <view class="detail-bg">
            <!-- <view class="bg-box">
                <text class="bg-text">待发货</text>
                <text class="bg-text-bottom">收到订单，平台将尽快发货</text>
            </view> -->
            <!-- <view class="bg-box">
                <text class="bg-text">待收货</text>
                <text class="bg-text-bottom">商品发货后15天将自动确认收货。</text>
            </view> -->
            <view class="bg-box">
                <text class="bg-text">已完成</text>
                <text class="bg-text-bottom"></text>
            </view>
            <view class="detail-address">
                <view class="address-top">
                    <text class="top-text">快递配送</text>
                    <text class="top-name">张大大 167238628365</text>
                    <view class="top-address">
                        四川省 成都市 高新区 华阳镇街道天府大道南段89号一栋二单元1204
                    </view>
                </view>
            </view>
        </view>
        <view class="detail-list">
            <view class="list-info">
                <view class="info-top">
                    <text class="top-text">物流信息</text>
                    <text class="top-more" @click="goLogDetails">查看 ></text>
                </view>
                <view class="info-bottom">
                    <text class="bottom-text">物流公司：顺丰快递</text>
                    <text class="bottom-sn">快递单号：56645324567765435</text>
                    <text
                        style="
                            color: #d65051;
                            text-align: right;
                            display: inline-block;
                            float: right;
                        "
                        >复制
                    </text>
                </view>
            </view>
            <view class="list-item">
                <view class="list-center">
                    <view class="center-left">
                        <image src="../../static/mine/关于.png" mode="widthFix"></image>
                    </view>
                    <view class="center-right">
                        <view class="right-top line-clamp-2">
                            环球德训鞋子女2024春季新款百搭休闲帆布鞋小众2023复古运动板鞋
                        </view>
                        <view class="right-center"> 规格：白色 升级款，35 </view>
                        <view class="right-bottom">
                            <text class="bot-min">￥</text>68
                            <text class="right-min">X1</text>
                        </view>
                    </view>
                </view>
                <view class="item-bottom">
                    <view class="bottom-text">共计：<text class="bottom-min">68</text></view>
                </view>
            </view>
        </view>
        <view class="detail-bottom">
            <view class="bottom-item">
                <text class="bot-lrft">订单编号</text>
                <text class="bot-right">123456789</text>
            </view>
            <view class="bottom-item">
                <text class="bot-lrft">下单时间</text>
                <text class="bot-right">2024-03-05 20:25:45</text>
            </view>
            <view class="bottom-item">
                <text class="bot-lrft">发货时间</text>
                <text class="bot-right">2024-03-05 20:25:45</text>
            </view>
            <view class="bottom-item">
                <text class="bot-lrft">完成时间</text>
                <text class="bot-right">2024-03-05 20:25:45</text>
            </view>
        </view>
        <view class="btn">
            <!-- <view class="detail-btn"> 取消订单 </view> -->
            <view class="detail-btn" @click="goLogReturns"> 申请退款 </view>
            <view class="detail-btn"> 联系客服 </view>
            <!-- <view class="detail-btn1"> 确认收货 </view> -->
        </view>
    </view>
</template>
<script>
export default {
    name: "orderDetail",
    components: {},
    mixins: [],
    props: {},
    data() {
        return {
            refund: 2, //1申请退款  2退款成功
        };
    },
    computed: {},
    watch: {},
    mounted() {},
    methods: {
        //点击调换到路由详情
        goLogDetails() {
            uni.navigateTo({
                url: "/subpack/LogDetails/LogDetails",
            });
        },
        //点击申请退款
        goLogReturns() {
            if (this.refund == 1) {
                uni.navigateTo({
                    url: "/subpack/Returns/Returns",
                });
            } else if (this.refund == 2) {
                uni.navigateTo({
                    url: "/subpack/ReturnsDetail/ReturnsDetail",
                });
            }
        },
    },
};
</script>
<style lang="scss" scoped>
.orderDetail {
    background-color: #f7f7f7;
    .detail-bg {
        height: 180rpx;
        background: linear-gradient(to bottom, #df484b, #f7f7f7);
        padding: 35rpx 20rpx;
        text {
            display: inline-block;
        }
        .bg-box {
            padding-left: 30rpx;
            .bg-text {
                color: #fff;
                display: block;
                font-size: 35rpx;
            }
            .bg-text-bottom {
                color: #fff;
                font-size: 24rpx;
                margin-top: 10rpx;
            }
        }

        .detail-address {
            background-color: #fff;
            border-radius: 20rpx;
            padding: 20rpx;
            margin: 30rpx 0;
            .address-top {
                .top-text {
                    color: #fff;
                    font-size: 22rpx;
                    background-color: #df484b;
                    padding: 8rpx 20rpx;
                    border-radius: 0 20rpx 0 20rpx;
                }
                .top-name {
                    font-size: 28rpx;
                    margin-left: 20rpx;
                    font-weight: bold;
                    position: relative;
                    top: 6rpx;
                }
                .top-address {
                    color: #999999;
                    font-size: 28rpx;
                    margin: 20rpx 0;
                }
            }
        }
    }
    .detail-list {
        margin: 100rpx 20rpx 0;
        .list-info {
            padding: 20rpx 0;
            background-color: #fff;
            margin: 20rpx;
            border-radius: 20rpx;
            .info-top {
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 28rpx;
                .top-text {
                }
                .top-more {
                    color: #999999;
                    font-size: 24rpx;
                }
            }
            .info-bottom {
                margin-top: 25rpx;
                font-size: 26rpx;
                .bottom-text {
                    display: block;
                    margin: 10rpx 0;
                }
            }
        }
        .list-item {
            padding: 20rpx;
            background-color: #fff;
            border-radius: 20rpx;
            .list-center {
                margin: 20rpx 20rpx 20rpx;
                display: flex;
                align-items: center;
                color: #333;
                image {
                    width: 120rpx;
                    height: 120rpx;
                    border-radius: 10rpx;
                }
                .center-right {
                    margin-left: 20rpx;
                    .right-top {
                        font-size: 28rpx;
                        line-height: 1.4;
                    }
                    .right-center {
                        font-size: 24rpx;
                        color: #999999;
                        margin: 10rpx 0;
                    }
                    .right-bottom {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        width: 100%;
                        color: #535353;
                        font-size: 40rpx;
                        text {
                            display: inline-block;
                        }
                        .bot-min {
                            font-size: 28rpx;
                        }
                        .right-min {
                            width: 100%;
                            color: #999999;
                            font-size: 28rpx;
                            text-align: right;
                            // position: relative;
                            // right: 20rpx;
                        }
                    }
                }
            }
            .item-bottom {
                text-align: right;
                .bottom-text {
                    color: #999999;
                    font-size: 28rpx;
                    .bottom-min {
                        font-size: 30rpx;
                        &::before {
                            content: "¥";
                            font-size: 30rpx;
                        }
                        color: #d65051;
                    }
                }
            }
        }
    }
    .detail-bottom {
        margin: 20rpx;
        background-color: #fff;
        border-radius: 20rpx;
        padding: 20rpx;
        .bottom-item {
            display: flex;
            color: #999999;
            font-size: 26rpx;
            margin: 14rpx 0;
            justify-content: space-between;
        }
    }
    .btn {
        width: 100%;
        background-color: #fff;
        position: fixed;
        bottom: -1rpx;
        left: -1rpx;
        padding: 20rpx;
        display: flex;
        justify-content: flex-end;
        box-sizing: border-box;
        .detail-btn {
            margin: 0 10rpx;
            padding: 10rpx 20rpx;
            border-radius: 40rpx;
            border: 1px solid #999;
            color: #999;
            font-size: 28rpx;
            margin-left: 20rpx;
        }
        .detail-btn1 {
            margin: 0 10rpx;
            padding: 15rpx 20rpx;
            border-radius: 40rpx;
            border: 1px solid #999;
            color: #999;
            font-size: 28rpx;
            &:last-child {
                border: 1px solid #d65051;
                color: #d65051;
                font-size: 28rpx;
            }
        }
    }
}
</style>
